<breadcrumb></breadcrumb>

<mat-card>
  <div class="demo-button">
    <section>
      <h2>Button elements</h2>
      <p>Click on the buttons to increase the button counter.</p>
      <p>Current number of clicks: {{counter}}</p>
      <button mat-button (click)="increase()">Check</button>
      <button mat-raised-button (click)="increase()">Pitch</button>
      <button mat-fab (click)="increase()"
              aria-label="Activate floating action style button to increase the button counter">
        <mat-icon>plus_one</mat-icon>
      </button>
      <button mat-mini-fab (click)="increase()"
              aria-label="Mini floating action button to increase the button counter by 1">
        <mat-icon>plus_one</mat-icon>
      </button>
      <button mat-icon-button (click)="increase()"
              aria-label="Icon button to increase the button counter by 1">
        <mat-icon>plus_one</mat-icon>
      </button>
    </section>

    <section>
      <h2>Anchor elements</h2>
      <a href="http://www.google.com" mat-button color="primary">Google search</a>
      <a href="https://www.youtube.com/" mat-raised-button>YouTube</a>
      <a href="http://www.google.com" mat-fab
         aria-label="Activate floating action style google search link">
        <mat-icon>search</mat-icon>
      </a>
      <a href="http://www.google.com" mat-mini-fab
         aria-label="Activate mini floating action style google search link">
        <mat-icon>search</mat-icon>
      </a>
      <a href="http://www.google.com" mat-icon-button
         aria-label="Activate icon style google search link">
        <mat-icon>search</mat-icon>
      </a>
    </section>

    <section>
      <h2>Buttons in different colors</h2>
      <button mat-button color="primary"
              (click)="openSnackBar('Color is primary.')">Primary</button>
      <button mat-button color="accent" (click)="openSnackBar('Color is accent.')">Accent</button>
      <button mat-button color="warn" (click)="openSnackBar('Color is warn.')">Warn</button>
    </section>

    <section>
      <h2>Disabled button</h2>
      <p>The following "cancel" button is disabled</p>
      <button mat-button [disabled]="true">Cancel</button>
    </section>
  </div>
</mat-card>